<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>气清商城</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="./images/favicon.ico"/>
    <!--    <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.png"/>-->
    <!--    <link rel="shortcut icon" href="./images/favicon.ico"/>-->
<!--    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap"-->
<!--          rel="stylesheet">-->
<!--    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/owl.carousel.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/jquery-ui.css">
    <link rel="stylesheet" href="./css/slick.css">
    <link rel="stylesheet" href="./css/chosen.min.css">
    <link rel="stylesheet" href="./css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="./css/magnific-popup.min.css">
    <link rel="stylesheet" href="./css/lightbox.min.css">
    <link rel="stylesheet" href="./js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="./css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="./css/mobile-menu.css">
    <link rel="stylesheet" href="./fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css"></link>
    <script src="./js/vue.min.js"></script>
    <style> [v-cloak] {
        display: none;
    } </style>
</head>
<body class="details-page">
<header class="header style7">
    <div class="top-bar">
        <div class="container">
            <div class="top-bar-left">
                <div class="header-message">
                    欢迎来到气清!
                </div>
            </div>
            <div class="top-bar-right">
                <div id="loginbar">
                    <ul class="header-user-links">
                        <li>
                            <a href="http://www.qk.com/login">请登录</a>
                        </li>
                    </ul>
                    <ul class="header-user-links">
                        <li>
                            <a href="http://www.qk.com/regist">注册</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="header-nav-container">
        <div class="container">
            <div class="header-nav-wapper main-menu-wapper">
                <div class="header-nav">
                    <div class="container-wapper">
                        <ul class="teamo-clone-mobile-menu teamo-nav main-menu " id="menu-main-menu">
                            <li class="menu-item  menu-item-has-children">
                                <a href="http://www.qk.com/allproducts" class="teamo-menu-item-title" title="Home">全部商品</a>
                            </li>
                            <li class="menu-item menu-item-has-children">
                                <a href="http://www.qk.com/shoppingcart" class="teamo-menu-item-title" title="Shop">购物车</a>
                            </li>
                            <li class="menu-item  menu-item-has-children item-megamenu">
                                <a href="http://www.qk.com/order" class="teamo-menu-item-title" title="Pages">订单</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-header">
                <div class="row">
                    <div class="col-lg-3 col-sm-4 col-md-3 col-xs-7 col-ts-12 header-element">
                        <div class="logo">
                            <a href="http://www.qk.com/index">
                                <img src="./images/logo.png" alt="img">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-7 col-sm-8 col-md-6 col-xs-5 col-ts-12">
                        <div class="block-search-block">
                            <form class="form-search form-search-width-category">
                                <div class="form-content">
                                    <div class="inner">
                                        <input type="text" class="input" id="productName" value="" placeholder="输入商品名称">
                                    </div>
                                    <button class="btn-search" type="button" id="searchProduct">
                                        <span class="icon-search"></span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<div class="main-content main-content-details single no-sidebar" id="product" v-if="product != null">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-trail breadcrumbs">
                    <ul class="trail-items breadcrumb">
                        <li class="trail-item trail-begin">
                            <a href="http://www.qk.com/index">主页</a>
                        </li>
                        <li class="trail-item">
                            <a href="http://www.qk.com/allproducts">商品列表</a>
                        </li>
                        <li class="trail-item trail-end active" v-cloak>
                            {{product.title}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="content-area content-details full-width col-lg-9 col-md-8 col-sm-12 col-xs-12">
                <div class="site-main">
                    <div class="details-product">
                        <div class="details-thumd" v-if="images != null">
                            <div class="image-preview-container image-thick-box image_preview_container">
                                <img :src="images[0]" alt="img">

                            </div>
                            <!--                            <div class="product-preview image-small product_preview">-->
                            <!--                                <div id="thumbnails" class="thumbnails_carousel owl-carousel" data-nav="true"-->
                            <!--                                     data-autoplay="false" data-dots="false" data-loop="false" data-margin="10"-->
                            <!--                                     data-responsive='{"0":{"items":3},"480":{"items":3},"600":{"items":3},"1000":{"items":3}}'>-->
                            <!--                                    <a href="#" data-image="./images/details-item-1.jpg"-->
                            <!--                                       data-zoom-image="./images/details-item-1.jpg" class="active">-->
                            <!--                                        <img src="./images/details-item-1.jpg"-->
                            <!--                                             data-large-image="./images/details-item-1.jpg" alt="img">-->
                            <!--                                    </a>-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                        </div>
                        <div class="details-infor" v-cloak>
                            <h1 class="product-title">
                                {{product.title}}
                            </h1>
                            <div class="stars-rating">
                                <div class="star-rating">
                                    <span class="star-5"></span>
                                </div>
                                <div class="count-star">
                                    (7)
                                </div>
                            </div>
                            <div class="availability">
                                销售情况
                                <a href="#">正在火热销售</a>
                            </div>
                            <div class="price" v-cloak>
                                <span>￥{{product.price*0.01}}/天</span>
                            </div>
                            <div class="product-details-description">
                                <ul>
                                    <li>{{product.sell_point}}</li>

                                </ul>
                            </div>
                            <div class="variations">
                                <div class="attribute attribute_color">
                                    <div class="color-text text-attribute">
                                        在库数量:
                                    </div>
                                    <div class="list-item">
                                        <a href="#">{{product.num}}台</a>

                                    </div>
                                </div>
                                <div class="attribute attribute_size">
                                    <div class="size-text text-attribute">
                                        安心保障
                                    </div>
                                    <div class="list-item">
                                        <a>温馨提示 ·支持7天无理由退货</a>
                                        <a>气清商城向您保证所售商品均为正品行货</a>
                                        <a>平台出租的商品，由平台提供发票和相应的售后服务。请您放心租用！</a>
                                    </div>
                                </div>
                            </div>
                            <div class="group-button">
                                <div class="yith-wcwl-add-to-wishlist">
                                    <div class="yith-wcwl-add-button">
                                        <a href="#">多数人的选择</a>
                                    </div>
                                </div>
                                <div class="size-chart-wrapp">
                                    <div class="btn-size-chart">
                                        <a id="size_chart" href="./images/size-chart.jpg" class="fancybox">更加节省费用</a>
                                    </div>
                                </div>
                                <div class="quantity-add-to-cart">
                                    <div class="quantity">
                                        <div class="control">
                                            <a class="btn-number qtyminus quantity-minus" href="#">-</a>
                                            <input type="text" data-step="1" min="1" value="1" title="Qty"
                                                   class="input-qty qty" size="4" id="productNum">
                                            <a href="#" class="btn-number qtyplus quantity-plus">+</a>
                                        </div>
                                    </div>
                                    <button class="  single_add_to_cart_button button" id="AddCar"
                                            onclick="addCart()">添加到购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-details-product">
                        <ul class="tab-link">
                            <li class="active">
                                <a data-toggle="tab" aria-expanded="true" href="#product-descriptions">商品详细介绍</a>
                            </li>
                        </ul>
                        <div class="tab-container">
                            <div id=" itemDesc" class="tab-panel active">
                                {{product.itemDesc}}
                            </div>
                            <div id=" itemDesc2" class="tab-panel active">
                                <!--                                {{product.itemDesc}}-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery.plugin-countdown.min.js"></script>
<script src="./js/jquery-countdown.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/owl.carousel.min.js"></script>
<script src="./js/magnific-popup.min.js"></script>
<script src="./js/isotope.min.js"></script>
<script src="./js/jquery.scrollbar.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script src="./js/mobile-menu.js"></script>
<script src="./js/chosen.min.js"></script>
<script src="./js/slick.js"></script>
<script src="./js/jquery.elevateZoom.min.js"></script>
<script src="./js/jquery.actual.min.js"></script>
<script src="./js/fancybox/source/jquery.fancybox.js"></script>
<script src="./js/lightbox.min.js"></script>
<script src="./js/owl.thumbs.min.js"></script>
<script src="./js/jquery.scrollbar.min.js"></script>
<!--<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>-->
<script src="./js/frontend-plugin.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">

    var TT = QK = {
        checkLogin: function () {
            var _ticket = $.cookie("QK_TICKET");

            if (!_ticket) {
                return;
            }
            //当dataType类型为jsonp时，jQuery就会自动在请求链接上增加一个callback的参数
            $.ajax({
                url: "http://sso.qk.com/user/query/" + _ticket,
                dataType: "jsonp",
                type: "GET",
                success: function (data) {
                    if (data.status == 200) {
                        //要求获取的是user的JSON串
                        var _data = JSON.parse(data.data);//将JSON串转化为对象
                        var html = "<div class='top-bar-right'><div id='loginbar'><ul class='header-user-links'><li><a href=\"/user/logout\" class=\"link-logout\"> " + _data.username + ",[退出]</a></li></ul><ul class=\"header-user-links\"> <li><a href=\"http://www.qk.com/personal\" class=\"link-setting\">个人中心</a></li></ul> </div> </div> ";
                        $("#loginbar").html(html);
                    }
                }
            });
        }
    }
    // <a href="http://www.jt.com/user/logout" class="link-logout">[退出]</a> <a>个人中心</a>


    $(function () {
        // 查看是否已经登录，如果已经登录查询登录信息
        TT.checkLogin();
    });
    //搜索功能 点击跳转事件
    $('#searchProduct').click(function () {
        title = $('#productName').val();
        console.log(title);
        window.location.href = "http://www.qk.com/allproducts?" + title;
    })


    //创建一个vue
    var vm = new Vue({
        el: '#product',
        data: {
            product: null,
            images: null
        },
    });


    var url = document.location.toString();
    var arrayObject = url.split("?")
    if (arrayObject.length > 1) {
        var productid = decodeURI(decodeURI(arrayObject[1]));
    }
    $.ajax({
        url: "/product/getProductById/" + productid,    //请求的url地址
        dataType: "json",   //返回格式为json
        async: false,//请求是否异步，默认为异步，这也是ajax重要特性
        data: {"id": productid},    //参数值
        type: "post",   //请求方式
        success: function (data) {
            // console.log(data);
            var product = data.data;
            vm.product = product;
            var img = product.image;
            var m = img.split(",");
            vm.images = m;

            // if (product.itemDesc != null) {
            //     $("#itemDesc").html(product.itemDesc)
            //     // document.getElementById("itemDesc").innerHTML = product.itemDesc;
            // }

            $(function () {
                $("#itemDesc2").html($("#itemDesc").text());
            });
        }

    })

    //添加购物车
    function addCart() {
        var cart ={
            "itemId": vm.product.id,
            "itemTitle": vm.product.title,
            "itemImage": vm.product.image,
            "itemPrice": vm.product.price,
            "num": $("#productNum").val()
        }
        console.log(cart)
        $.ajax({
            url: '/cart/add',
            data: cart,
            method: 'post',
            dataType: 'json',
            //执行完成回调函数
            success: function (data) {
                console.log(data)
                if (data.status == 200) {
                    window.alert("添加成功")
                } else {

                    window.alert("添加失败")
                }
            }, complete : function(XMLHttpRequest, textStatus) {
                    // 通过XMLHttpRequest取得响应头，sessionstatus
                    var sessionstatus = XMLHttpRequest.getResponseHeader("sessionstatus");
                    if (sessionstatus == "TIMEOUT") {
                        var win = window;
                        while (win != win.top){
                            win = win.top;
                        }

                        win.location.href= XMLHttpRequest.getResponseHeader("CONTEXTPATH");
                    }
                }
        })
        // 解决Ajax异步请求 springMvc 不跳转页面的问题




    }


</script>
</body>
</html>